今天要來講 金魚都能懂的網頁切版 : 不規則邊緣 NO021
通常這類的圖都會直接請設計師作圖出來，
只是讓大家知道有做圖之外的方式，
藉此能更靈活的運用 CSS 。
（這個設計是抓固定寬度1280px）

本篇關鍵字

• box-shadow
• position: absolute
• overflow: hidden

範例檔

(背景圖片: Kate Stone Matheson from Unsplash)

HTML

<div class="banner">
  <h2>Zombie@Dump</h2>
  <img
      src="https://images.unsplash.com/photo-1541781774459-bb2af2f05b55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1342&q=80"
      alt="Banner pic">
</div>

CSS

.banner {
  width: 100%;
  height: 700px;
  overflow: hidden;
  position: relative;
}

.banner::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 64px;
  height: 300px;
  background-color: rgba(119, 74, 54, 0.6);
  bottom: 0;
  left: 0;
  box-shadow: 64px 30px 0 rgba(138, 90, 68, 0.6),
  	      128px 60px 0 rgba(157, 107, 83, 0.6),
  	      192px 90px 0 rgba(176, 125, 98, 0.6),
  	      256px 120px 0 rgba(195, 142, 112, 0.6),
  	      320px 150px 0 rgba(205, 150, 119, 0.6),
  	      384px 180px 0 rgba(214, 160, 126, 0.6),
  	      448px 210px 0 rgba(222, 171, 144, 0.6),
  	      512px 240px 0 rgba(230, 183, 162, 0.6),
  	      576px 270px 0 rgba(237, 196, 179, 0.6),
  	      640px 270px 0 rgba(237, 196, 179, 0.6),
  	      704px 240px 0 rgba(230, 183, 162, 0.6),
  	      768px 210px 0 rgba(222, 171, 144, 0.6),
  	      832px 180px 0 rgba(214, 160, 126, 0.6),
  	      896px 150px 0 rgba(205, 150, 119, 0.6),
  	      960px 120px 0 rgba(195, 142, 112, 0.6),
  	      1024px 90px 0 rgba(176, 125, 98, 0.6),
  	      1088px 60px 0 rgba(157, 107, 83, 0.6),
  	      1152px 30px 0 rgba(138, 90, 68, 0.6),
  	      1216px 0px 0 rgba(119, 74, 54, 0.6);
}

.banner h2 {
  color: white;
  font-size: 50px;
  position: absolute;
  z-index: 1;
  left: 40px;
  bottom: 20px;
}

.banner img {
  width: 100%;
  vertical-align: middle;
}

喪屍分解

• 使用 ::before, ::after 搭配 position: absolute，製作蓋在圖上的裝飾
• 使用 box-shadow 製作出多個重複的物件，好處是改本體，其他分身一起改
• box-shadow

  box-shadow: /* offset-x | offset-y | blur-radius | spread-radius | color */;
  

  （我沒有使用到 spread-radius，所以省略不寫，金魚切版影片中有講到可以怎麼使用）
• 最後再用 overflow: hidden 解決溢位的問題

看完以上的內容，想必懶散如我，大家都會決定要做圖！
以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是搭配動畫的 Banner。